<template>
    <view>
        <view class="" style="height: 400rpx;">
                <image style="width:100%" src="https://yctwuliu.com/uploads/image/1.png" mode="widthFix"></image>
        </view>
        <view class="content bg100 plr12 pb50">
            <view class="header radius10  mb10 justify-between bgWhite ptb15 plr14 flex">
                <view class="flex-col tc" v-for="(i,n) in headerList" :key="n" @click="toArticleMain(i)">
                    <image :src="i.cover_image" class="radius10 mb10" mode=""></image>
                    {{i.title}}
                </view>
            </view>
            <!-- <uv-notice-bar direction="column" bgColor="#fff" :text="text"></uv-notice-bar> -->
            <swiper class="noticeSwiper" :circular="true" :vertical="true" style="height: 88rpx;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(i,n) in text" :key="n">
                    <view class="swiper-item justify-between align-center">
                        <view class="flex align-center justify-start">
                            <uv-icon name="volume-fill" color="#277CC0" size="14"></uv-icon>
                            <text>{{i.area_oring }}</text>
                            <image src="../../static/images/i1.png" style="width: 50rpx;" mode="widthFix"></image>
                            <text>{{i.area_dest}}</text>
                            <text>{{i.phone}}</text>
                        </view>
                        <text style="color: #277CC0;">完成运输</text>
                    </view>
                </swiper-item>
                
            </swiper>
            <view class="bgWhite plr14 ptb13 mt15  radius10">
                <view class="formBox ">
                    已安全运输车辆 <text class="orange">{{total_cart}}</text> 台
                </view>
                <view class=" justify-between ">
                    <view class="justify-between bggray6 ">
                        <text class="send"></text>
                        <view class="justify-between" @click="showChoseArea(0)">
                            <text>{{form.area_oring ?form.area_oring :"起始地"}}</text>
                            <uv-icon size="10" name="arrow-right"></uv-icon>
                        </view>
                    </view>
                    <view class="justify-between bggray6 right">
                        <text class="send" style="background-color:#F24611 ;"></text>
                        <view class="justify-between" @click="showChoseArea(1)">
                            <text>{{form.area_dest ?form.area_dest :"目的地"}} </text>
                            <uv-icon size="10" color="#222" name="arrow-right"></uv-icon>
                        </view>
                    </view>
                </view>
                <view class="justify-between bggray6 cartype">
                    <image src="/static/images/c1.png" mode="widthFix"></image>
                    <view class="justify-between" @click="showChoseCar()">
                        <text>{{car_type?car_type:"请选择车型" }}</text>
                        <uv-icon size="10" name="arrow-right"></uv-icon>
                    </view>
                </view>
                <view class="justify-between bggray6 cartype">
                    <image src="/static/images/c2.png" mode="widthFix"></image>
                    <input type="text" v-model="form.phone" placeholder="请输入手机号" />
                </view>
                <view class="submit mb5" @click="submitAsk()">
                    提交获取报价
                </view>
               <!-- <button class="chat"  open-type="contact" @contact="contact">
                    <image src="../../static/images/c3.png" mode="widthFix"></image> 在线客服-为您及时准确报价
                </button> -->
            </view>
            <view class="newOrder">最新订单 </view>
            <swiper class="swiper"  style="height: 620rpx;" circular indicator-active-color="#F24611" :indicator-dots="indicatorDots"
                :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(i,n) in orderList" :key="n">
                    <view class="orderItem bgWhite ptb10 plr10 mb12  justify-between radius6 "
                        v-for="(item,index) in i " :key="index">
                        <image :src="item.image" mode=""></image>
                        <view class="flex-col orderright justify-between mb10 ">
                            <text class="orderName clamp "> 订单编号：{{item.order_sn}}</text>
                            <view class="">
                                <text class="mr10">起始地：{{item.area_oring}}</text> <text>目的地：{{item.area_dest}}</text>
                            </view>
                            <!-- <text class="" v-if="item.car_arr"> 车型：{{computeds(item.car_arr) }}</text> -->
                            <text class=""> 发运日期：{{item.time}}</text>
                            <view class=""> 运费： <text class="price">{{item.total_amount}}</text> </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <uv-picker ref="picker" :columns="car_brand" @change="cartypeChange"   keyName="name" @confirm="confirm"></uv-picker>
        <uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
            @confirm="areaConfirm"></uv-picker>
        
        
    </view>
</template>

<script>
    
    export default {
        components:{
            
        },
        data() {
            return {
                headerList: [],
                car_brand: [
                    [],
                    []
                ],
                areaRrand: [
                    [],
                    []
                ],
                areatype:0,
                text: [],
                orderList: [],
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                form: {
                    area_oring: "",
                    area_dest: "",
                    cart_type: "",
                    phone: ""
                },
                AreaData:[],
                carColumnData:[],
                columnData:[],
                car_type:"",
                total_cart:0
            }
        },
        onLoad() {
            this.getIndex()
            this.getOrder()
            this.getAreaList()
        },
        mounted() {
          this.$refs.popup.open()  
        },
        methods: {
                
            computeds(data){
                let car = JSON.parse(data)[0].car_type
                return  car
            },
            showChoseArea(type){
                    this.areatype= type
                    this.$refs.areaPicker.open()
            },
            carChange(e){
                    const { columnIndex , index} = e
                	if (columnIndex === 0) {
                		this.$refs.areaPicker.setColumnValues(1, this.columnData[index])
                	}
            },
            cartypeChange(e){
                const { columnIndex , index} = e
                if (columnIndex === 0) {
                	this.$refs.picker.setColumnValues(1, this.carColumnData[index])
                }
            },
            async  getAreaList(){
                let data =await this.$api.getAreaList()
                this.AreaData = data.data
                data.data.map((item,n)=>{
                    this.areaRrand[0].push({
                        name:item.name,
                        id:item.id
                    })
                    let arr= []
                    item.child.map(i=>{
                        arr.push(i.name)
                        if(n==0){
                            if(arr.length==item.child.length){
                                    this.areaRrand[1]=arr
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }else{
                            if(arr.length==item.child.length){
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }
                    })
                })
            },
            showChoseCar() {
                this.$refs.picker.open();
            },
            confirm(e) {
                this.car_type = e.value[0].name+'-'+   e.value[1]
                this.carData.map(item=>{
                    item.car_type.map(i=>{
                        if(i.name==e.value[1]){
                            this.form.cart_type=i.id
                        }
                    })
                })
            },
            async submitAsk() {
                if(!this.form.area_oring) return this.$utils.msg('请选择出发地')
                if(!this.form.area_dest) return this.$utils.msg('请选择目的地')
                if(!this.form.cart_type) return this.$utils.msg('请选择车型')
                if(!this.form.phone) return this.$utils.msg('请输入手机号')
                if(!this.$utils.checkStr(this.form.phone ,'mobile')) return this.$utils.msg('请输入正确的手机号')
                const  res = await this.$api.getAddinquiry(this.form)
                console.log(res)
                    if(res.code==1){
                        uni.showToast({
                            title:'提交成功'
                        })
                        this.form={
                            area_oring: "",
                            area_dest: "",
                            cart_type: "",
                            phone: ""
                        }
                        this.car_type = ''
                    }else{
                        uni.showToast({
                            title:res.msg,
                            icon:'none'
                        })
                    }
            },
            async getIndex() {
                let data = await this.$api.getIndex()
                this.headerList = data.data.article
                this.carData =  data.data.car_brand
                this.total_cart = data.data.total_cart 
                    
                this.text = data.data.over_list
                   data.data.car_brand.map((item,n)=>{
                       this.car_brand[0].push({
                           name:item.name,
                           id:item.id
                       })
                       let arr= []
                       item.car_type.map(i=>{
                           arr.push(i.name)
                           if(n==0){
                               if(arr.length==item.car_type.length){
                                       this.car_brand[1]=arr
                                       this.carColumnData.push(arr)
                                       arr= []
                               }
                           }else{
                               if(arr.length==item.car_type.length){
                                       this.carColumnData.push(arr)
                                       arr= []
                               }
                           }
                       })
                      
                   })
            },
            areaConfirm(e) {
                if (this.areatype == 0) {
                    this.form.area_oring = e.value[1]
                } else {
                    this.form.area_dest = e.value[1]

                }
            },
            async getOrder() {
                let data = await this.$api.getIndexOrder()

                if (data.data.orderlist.length > 0) {
                    let arr = []
                    data.data.orderlist.map((item, n) => {
                        arr.push(item)
                        if (arr.length == 2 || n == data.data.orderlist.length - 1) {
                            this.orderList.push(arr)
                            arr = []
                        }
                    })
                }

            },
            toArticleMain(i){
                uni.navigateTo({
                    url:'/pages/article/index?id='+i.id
                })
            }
        },


    }
</script>
<style scoped lang="scss">
    .content {
        min-height: 100vh;
        position:relative;z-index:99;
    }

    .header {
        image {
            width: 160rpx;
            height: 160rpx;
        }
    }

    .formBox {
        position: relative;
        margin: 30rpx 0;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;

    }

    .formBox::before {
        position: absolute;
    }

    .bggray6 {
        border-radius: 9rpx;
        align-items: center;
        flex: 1;
        height: 88rpx;
        background: #F4F6F8;
        // border-bottom: 1rpx solid #E4E4E4;
        font-size: 30rpx;
        color: #555;
        padding: 0 24rpx;
        .send {
            width: 12rpx;
            height: 12rpx;
            
            color: #fff;
            text-align: center;
            
            background: #277CC0;
            border-radius: 50%;
            
            margin-right: 11rpx;
        }

        view {
            flex: 1;
        }

        margin-bottom: 14rpx;
    }

    .right {
        margin-left: 17rpx;
    }

    .cartype {
        image {
            width: 34rpx;
            margin-right: 11rpx;
        }

        view {
            flex: 1;
        }

        input {
            flex: 1;
            font-size: 28rpx;
        }
    }

    .submit {
        text-align: center;
        width: 470rpx;
           height: 88rpx;
           background: #277CC0;
           border-radius: 44rpx;
           font-weight: 400;
           font-size: 32rpx;
           color: #FFFFFF;
           line-height: 88rpx;
           margin: 30rpx auto;
    }

    .chat {
        background-color: #277CC0;
        border-radius: 5rpx;
        line-height: 60rpx;
        height: 60rpx;
        color: #fff;
        display: flex;
        font-size: 25rpx;

        justify-content: center;
        align-items: center;

        image {
            width: 36rpx;
            margin-right: 12rpx;
        }
    }

    .newOrder {
        font-size: 30rpx;
        color: #000;
        font-weight: 600;
        margin: 30rpx auto;
        text-align: center;
        position: relative;
    }

    .newOrder::after {
        clear: both;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 120rpx;
        height: 7rpx;
        background-color: #277CC0;
        opacity: .8;
        bottom: 4rpx;
    }

    .orderItem {
        font-size: 24rpx;
        color: #666;

        image {
            width: 256rpx;
            height: 235rpx;
            flex-shrink: 0;
            margin-right: 26rpx;
            border-radius: 8rpx;
        }

        .orderright {
            flex: 1;
            flex-shrink: 0;
            .orderName {
                color: #000000;
            }

            .price {
                color: #277CC0;
                font-size: 26rpx;
            }
        }
    }
    .noticeSwiper{
        
        height: 63rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9,2,4,0.03);
        border-radius: 12rpx;
        padding:0 24rpx;
        color: #555555;
        text{
            margin: 0 8rpx;
        }
    }
        
    .noticeSwiper .swiper-item{
        height: 100%;
    }
</style>